<!--
 * @Author: your name
 * @Date: 2020-05-29 12:08:55
 * @LastEditTime: 2020-06-08 17:58:03
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \tuyibo\components\AccountSettings.vue
--> 
<template>
  <section class="AccountSettings">
    <div class="AccountSettings-inner">
      <el-card>
      <div slot="header">
        <span class="card-title">账号管理</span>
      </div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="个人信息" name="personal">
            <el-form :model="personInfo" label-width="120px" label-suffix="：" ref="personInfo" :rules="rules" class="size-form" @submit.native.prevent>
              <el-form-item style="margin-bottom:0px;">
                <!-- <uploadAvatar :avatar="person.avatar" @change_avatar="change_avatar"/> -->
                 <el-upload
                  class="avatar-uploader"
                  :action="uploadImageUrl"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload"
                  >
                  <img v-if="person.avatar" :src="person.avatar|getStaticImg" title="更改头像" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
              <el-form-item label="昵称">
                <!-- <span title="双击昵称" v-if="!edit_nickname" @dblclick="dbEdit_nickname()">{{person.nickname||"null"}}</span> -->
                <el-input v-model="personInfo.nickname" ref="edit_nickname" style="width:200px;">{{personInfo.nickname}}</el-input>
              </el-form-item>
              <el-form-item label="账号ID"><span>{{personInfo.id}}</span><span style="color:#afa;margin-left:10px;">LV2</span></el-form-item>
              <el-form-item>
                <span style="color:#666">基本信息</span>
              </el-form-item>
              <el-form-item label="手机号" prop="mobile">
                <!-- <span @dblclick="dbEdit_phone()">{{person.mobile}}</span> -->
                <!-- <span title="双击修改手机号" v-if="!edit_phone" @dblclick="dbEdit_phone()">{{person.mobile||"null"}}</span> -->
                <el-input v-model="personInfo.mobile" style="width:200px;" ref="edit_phone">{{personInfo.mobile}}</el-input>
              </el-form-item>
              <el-form-item label="邮箱" prop="email">
                <!-- <span title="双击修改email" v-if="!edit_email" @dblclick="dbEdit_email()">{{person.email||"null"}}</span> -->
                <el-input v-model="personInfo.email" style="width:200px;" ref="edit_email" >{{personInfo.email}}</el-input>
              </el-form-item>
              <el-form-item label="性别">
                <el-radio v-model="personInfo.sex" label="男">男</el-radio>
                <el-radio v-model="personInfo.sex" label="女">女</el-radio>
              </el-form-item>
              <!-- <el-form-item label="职业">
                <el-input style="width:200px;" size="mini"></el-input>
              </el-form-item> -->
              <el-form-item>
              </el-form-item>
              <el-form-item label="个人荣誉">
                <ul class="honor-list">
                  <li><i class="el-icon-platform-eleme"></i><p>已注册:{{personInfo.register_date|CalRegisterDay}}天</p></li>
                  <li><i class="el-icon-platform-eleme"></i><p>点赞次数：{{personInfo.praises}}次</p></li>
                  <li><i class="el-icon-platform-eleme"></i><p>下载次数：{{personInfo.downloads}}次</p></li>
                  <li><i class="el-icon-platform-eleme"></i><p>上传内容：120次</p></li>
                </ul>
              </el-form-item>
              <el-form-item>
                <el-button :loading="showLoading" @click="onSubmit('personInfo')">保存</el-button>
                <el-button @click="cancel">取消</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="修改密码" name="change">
           <changePassword />
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </div>
  </section>
</template>
<script>
import Cookies from 'js-cookie'
// import uploadAvatar from "@/components/account/uploadAvatar.vue";
import changePassword from "@/components/account/changePassword.vue";
  export default {
    data(){
      return{
        personInfo:{
          nickname:'',
          mobile:'',
          email:'',
          sex:''
        },
        showLoading:false,
        edit_nickname:false,
        edit_phone:false,
        edit_email:false,
        errorHandler:false,
        activeName: 'personal',
        userid:'',
        uploadImageUrl: `${location.origin}/api/upAvatar/uploadlink?_csrf=${Cookies.get('X-CSRF-TOKEN')}`,
        rules: {
          mobile: [
            { required: true, message: "请输入手机号", trigger: "blur" },
            // 这个只能验证手机号
            // { pattern:/^0{0,1}(13[0-9]|15[7-9]|153|156|18[7-9])[0-9]{8}$/, message: "请输入合法手机号", trigger: "blur" }
            { pattern:/^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/, message: "请输入合法手机号/电话号", trigger: "change" }
          ],
            email: [
          { required: true, message: "请输入邮箱", trigger: "blur" },
            { pattern:/^([0-9A-Za-z\-_\.]+)@([0-9a-z]+\.[a-z]{2,3}(\.[a-z]{2})?)$/g, message: "请输入正确的邮箱", trigger: "change"}
          ],
        }
      }
    },
    components:{
      // uploadAvatar,
      changePassword
    },
    props:["person"],
    mounted(){
      if (window.sessionStorage.getItem("tuyibo_userid") !== null) {
        var data = JSON.parse(window.sessionStorage.getItem("tuyibo_userid"));
        this.userid = data.userid;
        // this.loadInfo(this.userid)
      }
      Object.assign(this.personInfo, this.person);
    },
    methods:{
      cancel(){
        Object.assign(this.personInfo, this.person);
      },
      onSubmit(personInfo){
        this.showLoading=true
         this.$refs[personInfo].validate((valid) => {
           if(valid){
             this.$axios.post("/api/user/updateUserInfo",this.personInfo)
             .then(res=>{
               if(res.data[0]>0){
                // this.$emit("change_mobile",this.mobile)
                Object.assign(this.person,this.personInfo)
                this.$message.success("修改成功")
              }else{
                this.$message.error("没有更改")
              }
              this.showLoading=false
             })
           }
         })
      },

      /** 
      submitPhone(){
        if(this.mobile!==this.person.mobile){
          this.$axios.post("/api/user/updatePhone",{id:this.userid,mobile:this.person.mobile})
          .then(res=>{
            if(res.data[0]>0){
              this.mobile=this.person.mobile
              // this.$emit("change_mobile",this.mobile)
              this.$message.error("修改成功")
            }else{
              this.$message.error("没有更改")
            }
            this.edit_phone=false;
          })
        }else{
            this.edit_phone=false;
        }
      },
      inputStred(){
        if(this.email!==this.person.email){
          this.$axios.post("/api/user/updateEmail",{id:this.userid,email:this.email})
          .then(res=>{
            if(res.data[0]>0){
              this.email=this.person.email
              // this.$emit("change_email",this.email)
              this.$message.success("修改成功")
            }else{
              this.$message.error("没有更改")
            }
            this.edit_email=false;
          })
        }else{
          this.edit_email=false;
        }
       
      },
      dbEdit_email(){
        this.edit_email= true;
        this.email=this.person.email
        setTimeout(()=>{
          this.$refs["edit_email"].focus()
        },0)
      },
      dbEdit_phone(){ 
        this.edit_phone= true;
        this.mobile=this.person.mobile
        setTimeout(()=>{
          this.$refs["edit_phone"].focus()
        },0)
      },
      dbEdit_nickname(){
        this.edit_nickname=true
        this.nickname=this.person.nickname
        setTimeout(()=>{
          this.$refs["edit_nickname"].focus();
        },0)
      },
      submitNickname(){
        if(this.nickname!==this.person.nickname){
          this.$axios.post("/api/user/updateNickname",{id:this.userid,nickname:this.person.nickname})
          .then(res=>{
            if(res.data[0]>0){
              this.nickname=this.person.nickname
              // this.$emit("change_nickname",this.nickname)
              this.$message.success("修改成功")
            }else{
              this.$message.error("没有更改")
            }
            this.edit_nickname=false
          })
        }else{
          this.edit_nickname=false
        }
      },
      */

      handleAvatarSuccess(res, file) {
        this.$emit("change_avatar",res.title)
        // this.person.avatar=res.title
        this.$axios.post("/api/user/updateAvatar",this.person)
        .then(res=>{
          if(res.data[0]>0){
            this.$message.success("修改成功")
          }else{
            this.$message.error("修改失败")
          }
        })
        // this.avatar = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },


      // loadInfo(id){
      //   this.$axios.post("/api/user/loadUserInfoByUid",{id})
      //   .then(res=>{
      //     this.person=res.data
      //   })
      // },
      handleClick(tab, event) {
        // console.log(tab, event);
      },
    }
  };
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
  @import "../assets/css/icon.css";
  .AccountSettings {
    position: relative;
    padding-top: 24px;
    height: 800px;
    .AccountSettings-inner {
      position: relative;
      text-align: left;
      max-width: 1380px;
      padding: 0 16px;
      margin: 0 auto;
      .size-form {
        padding-top: 16px;
        /deep/.el-form-item {
          .avatar{
            width: 80px;
            height: 80px;
            border-radius: 50%;
          }
          margin-bottom: 17px;
          .honor-list{
              text-align: center;
              list-style: none;
              display: flex;
              padding: 16px 16px 0;
              margin-bottom: 16px;
              >li>i{
                font-size: 30px;
              }
              >li+li{
                margin-left: 100px;
              }
            }
          .el-form-item__label {
            font-weight: 600;
          }
        }
      }
    }
  }
</style>